// Global settings
$enable-caret:              true; 
$enable-rounded:            true;
$enable-shadows:            true;
$enable-gradients:          false;
$enable-transitions:        true;
$enable-grid-classes:       true;
$enable-print-styles:       true;

// Color scheme
$default:       #262833;
$primary:       #e6e7ee;
$secondary:     #2D4CC8;

// Generic colors
$blue:    #0056B3;
$indigo:  #6610f2;
$purple:  #6f42c1;
$pink:    #e83e8c;
$red:     #A91E2C;
$orange:  #fd7e14;
$yellow:  #F0B400;
$green:   #18634B;
$teal:    #0056B3;
$cyan:    #17a2b8;

// Shades of grey
$white:    #ECF0F3;
$gray-100: #f3f7fa;
$gray-200: #fafbfe;
$gray-300: #e6e7ee;
$gray-400: #D1D9E6;
$gray-500: #b1bcce;
$gray-600: #93a5be;   
$gray-700: #66799e;   
$gray-800: #525480;   
$gray-900: #44476A;
$dark    : #31344b; 
$black   : #262833;


$grays: ();
$grays: map-merge((
  "100": $gray-100,
  "200": $gray-200,
  "300": $gray-300,
  "400": $gray-400,
  "500": $gray-500,
  "600": $gray-600,
  "700": $gray-700,
  "800": $gray-800,
  "900": $gray-900
), $grays);

// Main color variables
$success:       $green;
$info:          $teal;
$warning:       $yellow;
$danger:        $red;
$gray:          $gray-900;
$light:         $gray-400;
$soft:          $gray-300;
$dark:          $dark;

// Brands colors
$facebook:      #3b5999;
$twitter:       #1da1f2;
$google-plus:   #dd4b39;
$instagram:     #e4405f;
$pinterest:     #bd081c;
$youtube:       #cd201f;
$slack:         #3aaf85;
$dribbble:      #ea4c89;
$github:        #222222;
$dropbox:       #1E90FF;
$twitch:        #4B367C;
$paypal:        #ecb32c;
$behance:       #0057ff;
$reddit:        #E84422;

// Theme colors
$theme-colors: ();
$theme-colors: map-merge((
  "default":      $default,
  "primary":      $primary,
  "secondary":    $secondary,
  "light":        $light,
  "success":      $success,
  "info":         $info,
  "warning":      $warning,
  "danger":       $danger,
  "white":        $white,
  "gray":         $gray,
  "neutral":      $white,
  "dark":         $dark,
  "soft":         $soft,
  "black":        $black,
  "purple":       $purple,
  "gray-100":     $gray-100,
  "gray-200":     $gray-200,
  "gray-300":     $gray-300,
  "gray-400":     $gray-400,
  "gray-500":     $gray-500,
  "gray-600":     $gray-600,
  "gray-700":     $gray-700,
  "gray-800":     $gray-800,
  "facebook":     $facebook,
  "dribbble":     $dribbble,
  "github":       $github,
  "behance":      $behance,
  "twitter":      $twitter,
  "slack":        $slack,
), $theme-colors);

// Brand colors
$brand-colors: ();
$brand-colors: map-merge((
  "facebook":     $facebook,
  "twitter":      $twitter,
  "google-plus":  $google-plus,
  "instagram":    $instagram,
  "pinterest":    $pinterest,
  "youtube":      $youtube,
  "slack":        $slack,
  "dribbble":     $dribbble,
  "dropbox":      $dropbox,
  "twitch":       $twitch,
  "paypal":       $paypal,
  "behance":      $behance,
  "reddit" :      $reddit,  
  "github":       $github
), $brand-colors);


$yiq-contrasted-threshold:  200;
$yiq-text-dark:             $dark;

// Image Path
$path--rel      : "/img";

// Body
$body-bg: $soft;
$body-color: $gray-900;

// Shadows
$shadow-inset:            inset 2px 2px 5px #b8b9be, inset -3px -3px 7px #FFFFFF;
$box-shadow-soft:         6px 6px 12px #b8b9be, -6px -6px 12px #ffffff;
$box-shadow-light:        3px 3px 6px #b8b9be, -3px -3px 6px #ffffff;

// Sections
$section-colors: ();
$section-colors: map-merge((
  "primary":      $primary,
  "secondary":    $secondary,
  "gray":         $gray-400,
  "white":        $white,
  "dark":         $dark,
  "black":        $black 
), $section-colors);

// Links
$link-color:                $dark;
$link-decoration:           none;
$link-hover-color:          $black;
$link-hover-decoration:     none;

// Grid breakpoints
$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px
);

// Grid containers
//
// Define the maximum width of `.container` for different screen sizes.
$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
);

// Spacing
$spacer: 1rem;

$spacers: ();
$spacers: map-merge(
  (
    6: ($spacer * 5),
    7: ($spacer * 8),
    8: ($spacer * 10),
    9: ($spacer * 11),
    10: ($spacer * 15),
    'sm': ($spacer * 1),
    'md': ($spacer * 2),
    'lg': ($spacer * 4),
    'xl': ($spacer * 8)
), $spacers);


// This variable affects the `.h-*` and `.w-*` classes.

$sizes: ();
$sizes: map-merge((
  25: 25%,
  50: 50%,
  60: 60%,
  75: 75%,
  100: 100%
), $sizes);

// Components

$border-width:                .0625rem;
$border-width-md:             0.125rem;
$border-width-lg:             0.25rem;
$border-width-xl:             0.375rem;
$border-color-white:          $white;
$border-color:                $gray-200;

$border-radius:               .55rem;
$border-radius-xl:            .95rem;
$border-radius-lg:            .3rem;
$border-radius-md:            .2rem;
$border-radius-sm:            .1rem;
$border-radius-pill:           2rem;
$circle-radius:                50%;
$organic-radius:               63% 37% 30% 70% / 50% 45% 55% 50%;

$component-active-color:        $white;
$component-active-bg:           theme-color("primary");
$component-active-border-color: theme-color("primary");

$component-hover-color:        $gray-300;
$component-hover-bg:           $gray-300;
$component-hover-border-color: $gray-300;

$caret-width:                 .3em;

$transition-base:             all .2s ease;
$transition-transform:        transform .2s ease;
$transition-fade:             opacity .15s linear;
$transition-collapse:         height .35s ease;
$transition-tabs:             all 0.2s;


// Fonts
$fontawesome-webfonts-path:   '../vendor/font-awesome/webfonts';
$font-family-base:            'Nunito Sans', sans-serif;
$font-family-headers:         'Nunito Sans', sans-serif;
$font-awesome-5:              'Font Awesome 5 Free';
$font-size-base:              1rem; // Assumes the browser default, typically `16px`
$font-size-xxl:               ($font-size-base * 2);
$font-size-xl:                ($font-size-base * 1.5);
$font-size-lg:                ($font-size-base * 1.25);
$font-size-sm:                ($font-size-base * .875);
$font-size-xs:                ($font-size-base * .75);

$font-weight-light:           300;
$font-weight-normal:          400;
$font-weight-bold:            600;
$font-weight-bolder:          700;

$font-weight-base:            $font-weight-light;
$shape-height-base:            1.5;

$h1-font-size:                $font-size-base * 2.5;  //2.1875rem
$h2-font-size:                $font-size-base * 2;
$h3-font-size:                $font-size-base * 1.75;
$h4-font-size:                $font-size-base * 1.5;
$h5-font-size:                $font-size-base * 1.25;
$h6-font-size:                $font-size-base;

$headings-margin-bottom:      ($spacer / 2);
$headings-font-family:        inherit;
$headings-font-weight:        $font-weight-normal;
$headings-line-height:        1.3;
$headings-color:              $dark;

$heading-letter-spacing:      .025em;
$heading-font-size:           .95rem;
$heading-text-transform:      uppercase;
$heading-font-weight:         $headings-font-weight;

$heading-title-letter-spacing:      .025em;
$heading-title-font-size:           1.375rem;
$heading-title-font-weight:         $font-weight-bold;
$heading-title-text-transform:      uppercase;

$heading-section-letter-spacing:      .025em;
$heading-section-font-size:           1.375rem;
$heading-section-font-weight:         $font-weight-bold;
$heading-section-text-transform:      uppercase;

// Display headings
$display1-size:               5rem;
$display2-size:               3.5rem;
$display3-size:               2.5rem;
$display4-size:               1.875rem  ;

$display1-weight:             $font-weight-bold;
$display2-weight:             $font-weight-bold;
$display3-weight:             $font-weight-bold;
$display4-weight:             $font-weight-bold;
$display-line-height:         $headings-line-height;

$paragraph-font-size:         1rem;
$paragraph-font-weight:       300;
$paragraph-line-height:       1.6;

$lead-font-size:              ($paragraph-font-size * 1.25);
$lead-font-weight:            300;

$small-font-size:             80%;

$text-muted:                  $gray-800;

$blockquote-small-color:      $gray-800;
$blockquote-font-size:        ($font-size-base * 1.25);

$hr-border-color:             rgba($black, .05);
$hr-border-width:             $border-width;

$mark-padding:                .2em;

$dt-font-weight:              $font-weight-bold;

$list-inline-padding:         .5rem;

$mark-bg:                     #fcf8e3;

$hr-margin-y:                 $spacer * 1.5;

// Breadcrumbs
$breadcrumb-active-color:        $white;
$breadcrumb-divider-color:       $gray-700;
$breadcrumb-item-color:          $gray-700;
$breadcrumb-font-weight:         $font-weight-normal;
$breadcrumb-active-font-weight:  $font-weight-normal;
$breadcrumb-item-light-color:    $white;
$breadcrumb-divider-light-color: $white;

// Icon
$icon-shape:            5.5rem;
$icon-shape-sm:         4.5rem;
$icon-shape-xs:         2.5rem;
$icon-shape-lg:         6.5rem;
$icon-size:             2.25rem;
$icon-size-xs:          1.25rem; 
$icon-size-sm:          1.75rem;   
$icon-size-lg:          3rem;


//Owl Carousel

/*
 * 	Default theme - Owl Carousel CSS File
 */

//nav

$owl-nav-color: 			      $dark;
$owl-nav-color-hover:	      $dark;
$owl-nav-font-size: 		    $font-size-xxl;
$owl-nav-rounded: 			    3px;
$owl-nav-margin: 			      5px;
$owl-nav-padding: 			    4px 7px;
$owl-nav-background: 		    $dark;
$owl-nav-background-hover:	$dark;
$owl-nav-disabled-opacity: 	0.5;

//Dots

$owl-dot-width:				      13px;
$owl-dot-height:			      13px;
$owl-dot-rounded:			      $circle-radius;
$owl-dot-margin: 			      5px 5px;
$owl-dot-border-width:      1px;
$owl-dot-background:		    $dark;
$owl-dot-background-active:	$dark;
$owl-dot-shadow:            2px 1px 5px #b8b9be, -2px -1px 5px #ffffff;

// Tables

$table-cell-padding:          1rem;
$table-cell-padding-sm:       .3rem;

$table-bg:                    transparent;
$table-accent-bg:             rgba($black, .05);
$table-hover-bg:              rgba($black, .03);
$table-active-bg:             $table-hover-bg;

$table-border-width:          $border-width;
$table-border-color:          $light;

$table-head-bg:               $gray-200;
$table-head-color:            $gray-700;

$table-dark-bg:               $gray-900;
$table-dark-accent-bg:        rgba($white, .05);
$table-dark-hover-bg:         rgba($white, .075);
$table-dark-border-color:     lighten($gray-900, 7.5%);
$table-dark-color:            $body-bg;


// Inputs

$input-btn-padding-y:         .55rem;
$input-btn-padding-x:         .75rem;
$input-btn-line-height:       1.5;

$input-btn-focus-width:       0;
$input-btn-focus-color:       rgba($component-active-bg, 1);
$input-btn-focus-box-shadow:  none;

$input-btn-padding-y-sm:      .45rem;
$input-btn-padding-x-sm:      .5rem;
$input-btn-line-height-sm:    1.5;

$input-btn-padding-y-lg:      .875rem;
$input-btn-padding-x-lg:      1rem;
$input-btn-line-height-lg:    1.5;

$input-font-size-sm:          .875rem;
$input-font-size:             1rem;
$input-font-size-lg:          1.25rem;

$input-bg:                    $primary;

// Buttons

$btn-padding-y:               $input-btn-padding-y;
$btn-padding-x:               $input-btn-padding-x + 0.2;
$btn-line-height:             $input-btn-line-height;

$btn-padding-y-sm:            $input-btn-padding-y-sm;
$btn-padding-x-sm:            $input-btn-padding-x-sm;
$btn-line-height-sm:          $input-btn-line-height-sm;

$btn-padding-y-lg:            $input-btn-padding-y-lg;
$btn-padding-x-lg:            $input-btn-padding-x-lg;
$btn-line-height-lg:          $input-btn-line-height-lg;

$btn-border-width:            $border-width;

$btn-font-size:               $font-size-base;
$btn-font-weight:             $font-weight-normal;
$btn-text-transform:          uppercase;
$btn-letter-spacing:          .025em;
$btn-focus-width:             $border-width;
$btn-focus-box-shadow:        $shadow-inset;
$btn-active-box-shadow:       $shadow-inset;




// Forms

$input-padding-y:                       .6rem;
$input-padding-x:                       .75rem;
$input-line-height:                     $input-btn-line-height;

$input-padding-y-sm:                    $input-btn-padding-y-sm;
$input-padding-x-sm:                    $input-btn-padding-x-sm;
$input-line-height-sm:                  $input-btn-line-height-sm;

$input-padding-y-lg:                    $input-btn-padding-y-lg;
$input-padding-x-lg:                    $input-btn-padding-x-lg;
$input-line-height-lg:                  $input-btn-line-height-lg;

$input-border-radius:                   $border-radius;
$input-border-radius-xl:                $border-radius-xl;
$input-border-radius-lg:                $border-radius-lg;
$input-border-radius-sm:                $border-radius-sm;

$input-disabled-bg:                     $gray-300;

$input-muted-bg:                        $gray-100;

$input-color:                           $body-color;
$input-border-color:                    $light;
$input-border-width:                    $border-width ;

$input-focus-bg:                        $primary;
$input-focus-border-color:              theme-color("light");
$input-focus-color:                     $input-color;
$input-focus-width:                     0;
$input-focus-box-shadow:                none; //0 1px 3px 0 $gray-500;
$input-box-shadow:                      $shadow-inset;

$input-placeholder-color:               $gray-900;
$input-focus-placeholder-color:         $gray-900;

$input-height-border:                   $input-border-width;
$input-height-inner-half:               calc(#{$input-line-height * .325rem} + #{$input-padding-y});
$input-height-xl:                       calc(#{$input-line-height-lg * 1.5em} + #{$input-btn-padding-y-lg * 2} + #{$input-height-border}) !default;

$input-transition:                      all 0.3s ease-in-out;


// Input groups

$input-group-addon-color:               $input-placeholder-color;
$input-group-addon-bg:                  $input-bg;
$input-group-addon-border-color:        $input-border-color;

$input-group-addon-focus-color:               $input-focus-color;
$input-group-addon-focus-bg:                  $input-focus-bg;
$input-group-addon-focus-border-color:        $gray-200;

// Custom forms

$custom-control-gutter:                 1.75rem;
$custom-control-spacer-x:               1rem;
$custom-control-line-height:            1; 
$custom-control-indicator-size:         1.25rem;

$custom-control-bg:                     $gray-400;
$custom-control-indicator-bg:           $white;
$custom-control-border-width:           $border-width;
$custom-control-border-color:           $input-border-color;
$custom-control-box-shadow:             none;
$custom-toggle-slider-indicator-bg:     $dark;



$custom-control-indicator-hover-color:         $component-hover-color;
$custom-control-indicator-hover-bg:            $primary;
$custom-control-indicator-hover-border-color:  $component-hover-border-color;

$custom-control-indicator-active-color:         $component-active-color;
$custom-control-indicator-active-border-color:  $component-active-border-color;
$custom-control-indicator-active-bg:            transparent;


$custom-control-indicator-checked-color:        $component-active-color;
$custom-control-indicator-checked-bg:           $primary;
$custom-control-indicator-checked-border-color: $primary;
$custom-control-indicator-checked-disabled-bg:  rgba(theme-color("primary"), .7);
$custom-control-indicator-border-width:         1px;

$custom-control-indicator-disabled-bg:          $gray-200;
$custom-control-label-disabled-color:           $gray-800;

$custom-checkbox-bg:                            $gray-400;
$custom-checkbox-checked-bg:                    theme-color("primary");
$custom-checkbox-disabled-checked-bg:           rgba(theme-color("dark"), .7); 
$custom-checkbox-indicator-border-radius:       $circle-radius;
$custom-checkbox-indicator-border-width:        $border-width-md;
$square-checkbox-indicator-border-radius:       2px;
$custom-checkbox-indicator-icon-checked:        $font-awesome-5;
$custom-checkbox-shadow-inset:                  inset 1px 2px 2px #b8b9be, inset -5px -2px 4px #FFFFFF;

$custom-switch-indicator-size:                  calc(#{$custom-control-indicator-size} - #{$custom-control-indicator-border-width * 4});
 
//Switches
$custom-switch-width:                           $custom-control-indicator-size * 2 !default;
$custom-switch-indicator-border-radius:         $custom-control-indicator-size / 2 !default;
$custom-switch-indicator-size:                  calc(#{$custom-control-indicator-size} - #{$custom-control-indicator-border-width * 4}) !default;

// Form validation

$form-feedback-valid-bg:         lighten($success, 15%);
$form-feedback-valid-color:      theme-color("success");
$form-feedback-invalid-bg:       theme-color("danger");
$form-feedback-invalid-color:    theme-color("danger");


// Allows for customizing button radius independently from global border radius

$btn-border-radius:           $input-border-radius;
$btn-border-radius-xl:        $input-border-radius-xl;
$btn-border-radius-lg:        $input-border-radius-lg;
$btn-border-radius-sm:        $input-border-radius;


// No UI Slider

$noui-target-bg:                  $dark;
$noui-target-thickness:           5px;
$noui-target-border-radius:       5px;
$noui-target-border-color:        0;        
$noui-slider-connect-bg:          $primary;
$noui-slider-connect-disabled-bg: $gray-200;
$noui-box-shadow:                 2px 2px 4px #b8b9be, -2px -2px 4px #ffffff;
$noui-handle-width:               15px;
$noui-handle-bg:                  transparent;
$noui-handle-border:              0;
$noui-handle-border-radius:       $border-radius;
$noui-origin-border-radius:       $circle-radius;


// Dropdown

$dropdown-padding-y:                .7rem;
$dropdown-padding-x:                .7rem;
$dropdown-spacer:                   .825rem;
$dropdown-font-size:                $font-size-sm;
$dropdown-bg:                       $primary;
$dropdown-border-width:             $border-width;
$dropdown-border-color:             $light;
$dropdown-border-radius:            $border-radius;
$dropdown-item-color:               $body-color;
$dropdown-item-font-weight:         $font-weight-light;
$dropdown-item-hover-color:         $dark;
$dropdown-header-color:             $body-color;
$dropdown-header-font-weight:       $font-weight-bold;
$dropdown-divider-bg:               $light;
$dropdown-box-shadow:               $box-shadow-soft;

$dropdown-link-hover-bg:            $dark;
$dropdown-link-active-color:        $white;
$dropdown-link-active-bg:           $gray-400;

// Navs

$nav-link-padding-y:                .25rem;
$nav-link-padding-x:                .75rem;
$nav-link-color:                    $body-color;
$nav-link-hover-color:              $dark;
$nav-link-active-color:             $gray-700;

$nav-pills-padding-y:               .75rem;
$nav-pills-padding-x:               .85rem;

$nav-pills-space-x:                 2rem;
$nav-pills-border-circle:           50%;

$nav-pills-bg:                      $primary;
$nav-pills-border-width:            1px;
$nav-pills-border-color:            $light;
$nav-pills-border-radius:           $border-radius;

$nav-pills-link-hover-color:        $dark;
$nav-pills-link-active-color:       $dark;
$nav-pills-active-border-color:     $light;
$nav-pills-link-active-bg:          $primary;

// Progress Bars
$progress-xl-size: .9rem;
$progress-lg-size: .7rem;

// Navbar
$navbar-transition:                 cubic-bezier(0.34, 1.45, 0.7, 1);
$navbar-padding-y:                  1rem;
$navbar-padding-x:                  1rem;

$navbar-nav-link-padding-x:         1rem;
$navbar-nav-link-padding-y:         1rem;

$navbar-nav-link-font-size:         1rem;
$navbar-nav-link-font-weight:       400;
$navbar-nav-link-text-transform:    normal;
$navbar-nav-link-letter-spacing:    0;
$navbar-nav-link-border-radius:     $border-radius;

$navbar-dark-bg:                    transparent;
$navbar-dark-hover-bg:              rgba(255, 255, 255, .1);
$navbar-dark-active-bg:             rgba(255, 255, 255, .1);
$navbar-dark-color:                 $dark;
$navbar-dark-hover-color:           $black;
$navbar-dark-active-color:          rgba($white, .65);
$navbar-dark-disabled-color:        rgba($white, .25);
$navbar-dark-toggler-border-color:  transparent;

$navbar-light-bg:                   transparent;
$navbar-light-hover-bg:             $dark;
$navbar-light-active-bg:            $body-color;
$navbar-light-color:                $body-color;
$navbar-light-hover-color:          $dark;
$navbar-light-active-color:         $body-color;
$navbar-light-disabled-color:       rgba($gray-800, .9);
$navbar-light-toggler-icon-bg:      str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23");
$navbar-light-toggler-border-color: transparent;

$navbar-dropdown-item-font-weight:  $font-weight-normal;
$navbar-dropdown-item-font-size:    1rem;

// Nav tabs

$nav-tabs-border-color:             $gray-200;
$nav-tabs-link-active-color:        $primary;
$nav-tabs-link-active-bg:           $gray-100;



// Alerts

$alert-text-color: $white;
$alert-padding-y: 1rem;
$alert-padding-x: 1.5rem;
$alert-border-radius: $border-radius;

$alert-bg-level: -1;
$alert-border-level: 1;
$alert-color-level: 2;
$alert-link-color:$white;


// List group

$list-group-bg:                     transparent;
$list-group-border-color:           $light; //rgba($black, .125);
$list-group-border-width:           $border-width;
$list-group-border-radius:          $border-radius;

$list-group-item-padding-y:         1rem;
$list-group-item-padding-x:         1rem;

$list-group-hover-bg:               $gray-300;
$list-group-active-color:           $gray;
$list-group-active-bg:              $primary;
$list-group-active-border-color:    $list-group-active-bg;

$list-group-disabled-color:         $gray-600;
$list-group-disabled-bg:            $list-group-bg;

$list-group-action-color:           $gray-900;
$list-group-action-hover-color:     $list-group-action-color;

$list-group-action-active-color:    $list-group-action-color;
$list-group-action-active-bg:       $gray-200;


// Close

$close-font-size:                   $font-size-base * 1.5;
$close-font-weight:                 $font-weight-bold;
$close-bg:                          transparent;
$close-hover-bg:                    transparent;
$close-color:                       rgba(0, 0, 0, .6);
$close-hover-color:                 rgba(0, 0, 0, .9);
$close-text-shadow:                 none;


// Popovers

$popover-font-size:                 $font-size-sm;
$popover-bg:                        $primary;
$popover-max-width:                 276px;
$popover-border-width:              1px;
$popover-border-color:              $light;
$popover-border-radius:             $border-radius-lg;
$popover-box-shadow:                $shadow-inset;

$popover-header-bg:                 $popover-bg;
$popover-header-color:              $headings-color;
$popover-header-padding-y:          .75rem;
$popover-header-padding-x:          .75rem;

$popover-body-color:                $body-color;
$popover-body-padding-y:            $popover-header-padding-y;
$popover-body-padding-x:            $popover-header-padding-x;

$popover-arrow-width:               1.5rem;
$popover-arrow-height:              .75rem;
$popover-arrow-color:               $light;

$popover-arrow-outer-color:         transparent;

// Toasts

$toast-font-size:                   1rem;
$toast-background-color:            $primary;
$toast-border-color:                $light;
$toast-border-radius:               $border-radius;
$toast-box-shadow:                  3px 3px 6px #b8b9be, -3px -3px 6px #ffffff;

$toast-header-color:                $dark;
$toast-header-background-color:     rgba($primary, .85) !default;
$toast-header-border-color:         $light;


// Badges

$badge-font-size:                   0.7rem;
$badge-font-weight:                 $font-weight-bold;
$badge-padding-y:                   .275rem;
$badge-padding-x:                   .425rem;


$badge-pill-padding-x:              .875em;
$badge-pill-border-radius:          10rem;

$badge-circle-size:                 2rem;

// Pagination

// $pagination-padding-y:              .5rem;
// $pagination-padding-x:              .75rem;
// $pagination-padding-y-sm:           .25rem;
// $pagination-padding-x-sm:           .5rem;
// $pagination-padding-y-lg:           .75rem;
// $pagination-padding-x-lg:           1.5rem;
// $pagination-line-height:            1.25;

$pagination-color:                  $gray-600;
$pagination-bg:                     $white ;
$pagination-border-width:           $border-width;
$pagination-border-color:           $gray-200;


$pagination-hover-color:            $gray-600;
$pagination-hover-bg:               $gray-200;
$pagination-hover-border-color:     $gray-200;

$pagination-active-color:           $component-active-color;
$pagination-active-bg:              $primary;
$pagination-active-border-color:    $pagination-active-bg;
$pagination-active-box-shadow:      $shadow-inset;

$pagination-disabled-color:         $gray-800;
$pagination-disabled-bg:            $primary;
$pagination-disabled-border-color:  $gray-300;


// Cards

$card-spacer-y:                     1.25rem;
$card-spacer-x:                     1.5rem;
$card-social-padding:               .25rem .375rem; 
$card-border-width:                 $border-width;
$card-border-radius:                $border-radius;
$card-border-color:                 rgba($gray-100, .05);
$card-inner-border-radius:          calc(#{$card-border-radius} - #{$card-border-width});
$card-cap-bg:                       $gray-100;
$card-bg:                           $primary;
$card-opacity:                      1;

$card-img-overlay-padding:          1.25rem;
$transition-bezier-card:            cubic-bezier(0.34, 1.45, 0.7, 1);

//$card-group-margin:                 ($grid-gutter-width / 2);
//$card-deck-margin:                  $card-group-margin;

$card-columns-count:                3;
$card-columns-gap:                  1.25rem;
$card-columns-margin:               $card-spacer-y;

//Timelines
$timeline-font-size:                $font-size-xxl;
$timeline-font-color:               $gray-800;
$timeline-border-color:             $gray-400;
$timeline-border-color-dark:        $gray-500;
$timeline-background-color:         $gray-100;
$timeline-line-height:              3;
$timeline-border-width:             6px;
$timeline-circle-radius:            50%;
$timeline-spacer-y:                 1.25rem;
$timeline-spacer-x:                 2.75rem;
$timeline-inset-shadow:             inset 1px 2px 1px #d2d2d2, inset -3px -3px 7px #eff0f5;


// Steps
$step-number-size:                  12rem;
$step-shape-size:                   7rem;
$step-border-width:                 $border-width;
$step-icon-size:                    $icon-size-lg; 

// Tooltips
$tooltip-font-size:                 $font-size-sm;
$tooltip-color:                     $black;
$tooltip-bg:                        $white;

// Modals

$modal-inner-padding:               1.5rem;

$modal-lg:                          800px;
$modal-md:                          500px;
$modal-sm:                          380px;

$modal-title-line-height:           1.8;

//$modal-title-line-height:           $shape-height-base;

$modal-content-bg:               $primary;
$modal-content-border-color:     $light;
$modal-content-border-width:     1px;
$modal-content-border-radius:   $border-radius-lg;

$modal-header-border-color:   $light;
$modal-backdrop-bg:           $primary;
$modal-backdrop-opacity:      .9;
$modal-footer-border-color:   $modal-header-border-color;
$modal-header-border-width:   $modal-content-border-width;
$modal-footer-border-width:   $modal-header-border-width;
$modal-header-padding:        1.25rem;

// Datepicker

$datepicker-border-radius: $border-radius-sm;
$datepicker-dropdown-padding: 20px 22px;

$datepicker-cell-transition: $transition-base;
$datepicker-cell-hover-background: $primary;
$datepicker-cell-border-radius: 50%;
$datepicker-cell-width: 36px;
$datepicker-cell-height: 36px;

$datepicker-disabled-cell-color: $gray-300;
$datepicker-disabled-old-new-color: $gray-500;

$datepicker-header-cell-border-radius: $border-radius-sm;

$datepicker-active-color: $white;
$datepicker-active-background: theme-color("dark");
$datepicker-active-box-shadow: none;

$datepicker-range-background: theme-color("dark");
$datepicker-range-cell-focused-background: darken($datepicker-range-background, 5%);
$datepicker-range-color: $white;
$datepicker-range-highlighted-bg: $gray-200;

$datepicker-dropdown-border: lighten($gray-400, 40%);
$datepicker-dropdown-bg: $white;
$datepicker-highlighted-bg: $datepicker-active-background;


// Footer

$footer-link-font-size: .85rem;
$footer-bg: theme-color("secondary");
$footer-color: $gray-600;
$footer-link-color: $gray-600;
$footer-link-hover-color: $gray-700;
$footer-heading-color: $gray-600;
$footer-heading-font-size: $font-size-sm;
$padding-footer-sm:       .125rem ;
$padding-footer:          .375rem ;
$padding-footer-md:       .625rem ;
$padding-footer-general:  .9375rem;
$padding-footer-big:      1.5rem;

// Posts
$avatar-sm-y: 1.5rem;
$avatar-sm-x: 1.5rem;

$avatar-md-y: 2rem;
$avatar-md-x: 2rem;

$avatar-lg-y: 3rem;
$avatar-lg-x: 3rem;

